<template>
  <div :class="{ show: show }" class="header-search">
    <el-icon class-name="search-icon" icon-class="search" style="width: 30px; height: 50px; font-size: 18px" @click.stop="click"><Search /></el-icon>
    <!-- <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" ></svg-icon> -->
    <el-input
      ref="headerSearchSelectRef"
      v-model="search"
      filterable
      default-first-option
      remote
      placeholder="页面搜索"
      class="header-search-select"
      @keyup.enter="handleInputConfirm"
    >
      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
    </el-input>
  </div>
</template>

<script setup>
import Fuse from 'fuse.js'
import { getNormalPath } from '@/utils/ruoyi'
import { isHttp } from '@/utils/validate'
import usePermissionStore from '@/store/modules/permission'
import { useUserInfoStore } from '@/stores/userInfo'
import { i18n } from '@/i18n/index.ts'
const search = ref('')
const options = ref([])
const searchPool = ref([])
const show = ref(false)
const fuse = ref(undefined)
const headerSearchSelectRef = ref(null)
const router = useRouter()
const routes = computed(() => usePermissionStore().routes)
let miss = 0

const userInfoStore = useUserInfoStore()
// 筛选出所有路由中可以展示的路由
const canShowPages = (routes) => {
  if (Array.isArray(routes) && routes.length > 0) {
    routes.forEach(({ children, path, meta }) => {
      if (meta && meta.title) {
        const { title } = meta
        if (!children && i18n.global.t(title) === search.value) {
          router.push(path)
          search.value = ''
          // TagsViewStore.everyTagList.push({ name: title, path, isClick: false })
        } else {
          canShowPages(children)
        }
      }
    })
  }
}
// 输入后回车触发函数跳转到指定页面
const handleInputConfirm = () => {
  canShowPages(userInfoStore.menuRoutes)
  // let route = TagsViewStore.everyTagList.find((item) => item.name === inputValue.value)
  // if (route?.path) {
  //   path = route.path
  //   miss++
  // }

  // if (inputValue.value && path) {
  //   TagsViewStore.PushOneTag(inputValue.value, path)
  //   router.push(path)
  // }
  // if (miss === 1) {
  //   ElMessage({
  //     message: '未查询到该菜单页面',
  //     type: 'error',
  //     center: true
  //   })
  // }

  // proxy.$msg.error('未查询到该菜单页面')
  // miss = 0/

  // inputVisible.value = false
  // inputValue.value = ''
}
function click() {
  show.value = !show.value
  if (show.value) {
    headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
  }
}
function close() {
  headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
  options.value = []
  show.value = false
}
function change(val) {
  const path = val.path
  const query = val.query
  if (isHttp(path)) {
    // http(s):// 路径新窗口打开
    const pindex = path.indexOf('http')
    window.open(path.substr(pindex, path.length), '_blank')
  } else {
    if (query) {
      router.push({ path: path, query: JSON.parse(query) })
    } else {
      router.push(path)
    }
  }

  search.value = ''
  options.value = []
  nextTick(() => {
    show.value = false
  })
}
function initFuse(list) {
  fuse.value = new Fuse(list, {
    shouldSort: true,
    threshold: 0.4,
    location: 0,
    distance: 100,
    minMatchCharLength: 1,
    keys: [
      {
        name: 'title',
        weight: 0.7
      },
      {
        name: 'path',
        weight: 0.3
      }
    ]
  })
}
// Filter out the routes that can be displayed in the sidebar
// And generate the internationalized title
function generateRoutes(routes, basePath = '', prefixTitle = []) {
  let res = []

  for (const r of routes) {
    // skip hidden router
    if (r.hidden) {
      continue
    }
    const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path
    const data = {
      path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
      title: [...prefixTitle]
    }

    if (r.meta && r.meta.title) {
      data.title = [...data.title, r.meta.title]

      if (r.redirect !== 'noRedirect') {
        // only push the routes with title
        // special case: need to exclude parent router without redirect
        res.push(data)
      }
    }
    if (r.query) {
      data.query = r.query
    }

    // recursive child routes
    if (r.children) {
      const tempRoutes = generateRoutes(r.children, data.path, data.title)
      if (tempRoutes.length >= 1) {
        res = [...res, ...tempRoutes]
      }
    }
  }
  return res
}
function querySearch(query) {
  if (query !== '') {
    options.value = fuse.value.search(query)
  } else {
    options.value = []
  }
}

onMounted(() => {
  searchPool.value = generateRoutes(routes.value)
})

watchEffect(() => {
  searchPool.value = generateRoutes(routes.value)
})

watch(show, (value) => {
  if (value) {
    document.body.addEventListener('click', close)
  } else {
    document.body.removeEventListener('click', close)
  }
})

watch(searchPool, (list) => {
  initFuse(list)
})
</script>

<style lang="scss" scoped>
.header-search {
  font-size: 0 !important;

  .search-icon {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle;
  }

  .header-search-select {
    font-size: 18px;
    transition: width 0.2s;
    width: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    vertical-align: middle;
    margin-top: -15px;

    :deep(.el-input__inner) {
      border-radius: 0;
      border: 0;
      padding-left: 0;
      padding-right: 0;
      box-shadow: none !important;
      border-bottom: 1px solid #d9d9d9;
      vertical-align: middle;
    }
  }

  &.show {
    .header-search-select {
      width: 210px;
      margin-left: 10px;
    }
  }
}
</style>
